<template>
    <el-dialog v-model="visible" title="分配角色" :before-close="cancel">
        <el-form :model="form">
            <el-form-item label="账号:">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名:">
                <el-input v-model="form.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱:">
                <el-input v-model="form.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码:">
                <el-input v-model="form.password" autocomplete="off" type="password" />
            </el-form-item>
            <el-form-item label="备注:">
                <el-input v-model="form.note" autocomplete="off" type="text" />
            </el-form-item>
            <el-form-item label="是否启用:">
                <el-radio v-model="form.status" autocomplete="off" type="text" label="是" />
                <el-radio v-model="form.status" autocomplete="off" type="text" label="否" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="cancel">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
    
<script setup lang='ts'>
import { reactive, ref, withDefaults, Ref, watch } from 'vue';

// let dialogFormVisible = ref(true)
const form = ref({}) as Ref<ILoginListType>
watch(
    () => props.data,
    (val) => {
        form.value = { ...val }
    },
    { deep: true }
)
// 父传子接收
const props = withDefaults(defineProps<{ visible: boolean; data: ILoginListType }>(), { visible: false })
// 子传父
const emit = defineEmits<{
    (e: 'close'): void;
}>();
// 关闭方法
function cancel() {
    emit('close')
}
</script>
    
<style>
</style>